import './App.css';
import './bootstrap.css'
import React from 'react'
// import Header from './components/Header'
// import Footer from './components/Footer'
// import List from './components/List'
// import Student from './components/Student'
import { Link, BrowserRouter, NavLink, Route, Switch } from 'react-router-dom'

import Home from './components/Home'
import About from './components/About'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'


export default class App extends React.Component {
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打代码', done: false },
    ]
  }

  // addTodo用于添加一个todo,接收的参数是todo对象 
  addTodo = (todoObj) => {
    // console.log('app', name)
    //获取todos 
    const { todos } = this.state
    // 追加一个todo
    const newTodos = [todoObj, ...todos]
    // 更新状态 
    this.setState({ todos: newTodos })
  }

  // updateTodo 用于更新一个todo对象  
  updateTodo = (id, done) => {
    // 获取状态中的todos 
    const { todos } = this.state
    const newTodos = todos.map(todoObj => {
      if (todoObj.id === id) return { ...todoObj, done }
      else return todoObj
    })

    this.setState({ todos: newTodos })
  }

  // deleteTodo 用于删除一个todo对象
  deleteTodo = (id) => {
    // 获取原来的todos
    const { todos } = this.state
    // 删除指定id的todo对象
    const newTodos = todos.filter((todoObj) => {
      return todoObj.id !== id
    })

    // 更新状态
    this.setState({ todos: newTodos })
  }

  checkAllTodo = (done) => {
    // 获取原来的todos
    const { todos } = this.state
    // 加工数据
    const newTodos = todos.map((todoOjb) => {
      return { ...todoOjb, done }
    })

    // 更新状态
    this.setState({ todos: newTodos })
  }

  clearAllDone = () => {
    const { todos } = this.state
    const newTodos = todos.filter((todoOjb) => {
      return !todoOjb.done
    })

    this.setState({ todos: newTodos })
  }

  // render() {
  //   const {todos} = this.state
  //   return (
  //     <div className="todo-container">
  //       <div className="todo-wrap">
  //         <Header addTodo={this.addTodo}/>
  //         <List todos={todos} 
  //           updateTodo = {this.updateTodo}
  //           deleteTodo = {this.deleteTodo}/>
  //         <Footer todos={todos} checkAllTodo={this.checkAllTodo}
  //             clearAllDone={this.clearAllDone}/>
  //             <Student/>
  //       </div>
  //     </div>
  //   )
  // }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}
              <MyNavLink to="/about" children="About" />
              <MyNavLink to="/home" children="Home" />
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />

                </Switch>

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

